<template>
  <div class="checkboxgroup">
    
    <!-- 当前品类弹窗 -->
    
      <div class="wrap">
        <div class="title">请选择要设置的权限</div>
        <div class="content">
          <template v-if="classifyData!=null && classifyData.length>0">
            <div class="item" v-for="(first,firIndex) in classifyData">
              <div class="itemHeader">
                <div v-cloak>{{first.skillLableName}}</div>
                <div class="allCheck">
                  <el-checkbox
                    v-model="first.mychecked"
                    @change="firstChanged(firIndex,first.skillLableId)"
                    :label="first.skillLableId"
                  >全选</el-checkbox>
                </div>
              </div>
              <div class="itemContent">
                <template
                  v-for="(second,index2) in first.serviceClassEntitys"
                >
                  <el-checkbox
                    v-model="second.mychecked"
                    @change="secondChanged(firIndex,second.serviceClassId)"
                    :title="second.serviceClassName"
                    :label="second.serviceClassId"
                  >{{second.serviceClassName}}</el-checkbox>
                </template>
              </div>
            </div>
          </template>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button  @click="handleSelectAllClassfiy">全选</el-button >
        <el-button  @click="handleEmptyAllClassfiy">清空</el-button>
        <el-button type="primary" @click="handleClassfiySure">确定</el-button>
      </span>
    
  </div>
</template>
<script>
export default {
  name: "Checkbox",
  props: {},
  data() {
    return {
      dialogVisibleClassify: false, //品类弹窗是否显示
      classifyData: [], //当前所有品类数组
      checkedClassify: [], //选中的品类Id数组
      checkedClassifyName: [] //选中的品类名称数组
    };
  },
  mounted() {
    //获取品类数据
    this.getClassifyData();
  },
  methods: {
    getClassifyData() {
      this.$http
        .get("")
        .then(res => {
              console.log(res)
          if (res.data.code == 0 && res.data.data !== null) {
            var result = res.data.data;
            for (var i = 0; i < result.length; i++) {
              result[i]["mychecked"] = false;
              for (var j = 0; j < result[i].serviceClassEntitys.length; j++) {
                result[i].serviceClassEntitys[j]["mychecked"] = false;
              }
            }
            this.classifyData = result;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
 
 
     //品类弹框选择所有
        handleSelectAllClassfiy () {
            for (var i = 0; i < this.classifyData.length; i++) {
                this.classifyData[i].mychecked = true;
                this.firstChanged(i); //调用一级change事件
            }
        },
 
         // 一级change事件
         firstChanged(index) {　　　　　　　//一级未选中 则对应的二级都不选中
            if (this.classifyData[index].mychecked == false) {
                var childrenArray = this.classifyData[index].serviceClassEntitys;
                if (childrenArray) {
                    for (var i = 0, len = childrenArray.length; i < len; i++) {
                        childrenArray[i].mychecked = false;
                    }
                }　　　　　　　//一级选中  则对应的二级都选中
            } else if (this.classifyData[index].mychecked = true) {
                var childrenArray = this.classifyData[index].serviceClassEntitys;
                if (childrenArray) {
                    for (var i = 0, len = childrenArray.length; i < len; i++) {
                        childrenArray[i].mychecked = true;
                    }
                }
            }
        },
        //二级change事件
        secondChanged(firIndex) {    
            var childrenArray = this.classifyData[firIndex].serviceClassEntitys;
            var tickCount = 0,
                unTickCount = 0,
                len = childrenArray.length
            for (var i = 0; i < len; i++) {
                if (childrenArray[i].mychecked == true) {
                    tickCount++;
                }
                if (childrenArray[i].mychecked == false) {
                    unTickCount++;
                }
            }
            if (tickCount == len) { //二级全勾选  一级勾选            
                this.classifyData[firIndex].mychecked = true;
            } else {//二级未全选  一级不勾选
                this.classifyData[firIndex].mychecked = false;    
            }
        },
 
         //品类弹框清空所有
         handleEmptyAllClassfiy(){
            for(var i=0;i<this.classifyData.length;i++){
                for(var j=0;j<this.classifyData.length;j++){
                    this.classifyData[i].mychecked=false;
                    this.firstChanged(i)//调用一级change事件
                }
            }
        },
 
        ////品类筛选关闭
        handleClassfiySure() {
            this.checkedClassify = [];
            this.checkedClassifyName = [];
            //对classifyData处理给checkedClassify和checkedClassifyName赋值
            for (var i = 0; i < this.classifyData.length; i++) {
                var serviceClassEntitys = this.classifyData[i].serviceClassEntitys;
                var len = serviceClassEntitys.length;
                for (var j = 0; j < len; j++) {
                    if (serviceClassEntitys[j].mychecked==true) {
                        this.checkedClassify.push(serviceClassEntitys[j].serviceClassId);
                        this.checkedClassifyName.push(serviceClassEntitys[j].serviceClassName);
                    }
                }
            }
 
            //判断勾选的品类是否为空，为空的话显示全部
            if (this.checkedClassify.length==0) {
                for (var i = 0; i < this.classifyData.length; i++) {
                    var serviceClassEntitys = this.classifyData[i].serviceClassEntitys
                    for (var j = 0; j < serviceClassEntitys.length; j++) {
                        this.checkedClassifyName.push(serviceClassEntitys[j].serviceClassName);
                    }
                }
            }
            console.log(this.checkedClassify,this.checkedClassifyName);
            
        },
         
 
  }
};
</script>
<style scope>
/* 当前品类弹框 */
.filterClassfiy .el-dialog__body {
  padding: 20px 30px;
}
.el-dialog .el-dialog__title{
    color: #fff;
}
 
.filterClassfiy .wrap .title {
  font-size: 16px;
  color: #acacac;
  margin: 5px;
}
 
.filterClassfiy .wrap .content {
  width: 630px;
  height: 355px;
  padding: 20px;
  overflow-y: auto;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.2);
}
 
.filterClassfiy .wrap .content::-webkit-scrollbar {
  display: none;
}
 
.filterClassfiy .itemContent .el-checkbox {
  color: #fff;
  font-size: 12px;
  margin: 5px;
  width: 31%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
 
.filterClassfiy .wrap .content .el-checkbox__label {
  padding-left: 6px;
}
 
.filterClassfiy .wrap .content .itemHeader {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 5px;
}
.filterClassfiy .wrap .content .itemHeader .el-checkbox {
  width: 25%;
  color: #fff;
}
 
.filterClassfiy .wrap .content .itemHeader .el-checkbox__inner {
  left: 54px;
}
 
.filterClassfiy .wrap .content .itemHeader .allCheck {
  font-size: 12px;
  display: flex;
  width: 70px;
  align-items: center;
}
 
.filterClassfiy .wrap .content .itemHeader .allCheck span {
  display: inline-block;
}
 
.filterClassfiy .wrap .content .itemContent {
  background-color: #232b34;
  padding: 10px 20px 0;
}
 
.el-dialog__footer{
    text-align: center
}
</style>